<template>
  <div id="resource-card">
    <div>
      <el-card shadow="hover" class="card-div" style="border-radius: 15px;padding: 0;">
        <!--帖主info-->
        <div class="float-div" style="margin: 50px 0 0 20px">
          <el-avatar :src="require('assets/img/home-logo.png')" :size="45" style="background: white"></el-avatar>
          <div style="margin-top: -10px">
            <el-button type="text" class="NOTO-font-family" style="color: black;font-size: 16px">知然</el-button>
          </div>
          <div style="margin-top: -15px">
            <svg-icon iconname="zhiran-iconshu"></svg-icon>
            <el-button type="text" class="ZOOL-font-family" style="color: black;font-size: 12px">知然树苗</el-button>
          </div>
        </div>
        <!--帖子attribute-->
        <div class="float-div-right" style="margin: 2px 0 0px 0px;width: 250px;height: 25px">
          <div class="float-div-right div-res-attribute" id="viewNum" >
            <div class="float-div" style="margin-top: 3px">
              <svg-icon iconname="zhiran-iconliulanliang_huaban"></svg-icon>
            </div>
            <div class="float-div div-res-attribute-text" >
              120
            </div>
          </div>
          <div class="float-div-right div-res-attribute" id="downloadNum" >
            <div class="float-div" style="margin-top: 1px">
              <svg-icon iconname="zhiran-iconxiazailiang"></svg-icon>
            </div>
            <div class="float-div div-res-attribute-text" >
              564
            </div>
          </div>
          <div class="float-div-right div-res-attribute" id="likeNum" >
            <div class="float-div" style="margin-top: 2px">
              <svg-icon iconname="zhiran-icondianzanshu2"></svg-icon>
            </div>
            <div class="float-div div-res-attribute-text" >
              246
            </div>
          </div>
        </div>
        <!--帖子正文/标题-->
        <div class="float-div" style="margin: 5px 0 0 40px ;width:600px;height: 120px;">
          <el-card style="height: 120px;background: #F2F6FC">
            <div  class="NOTO-font-family" style="text-align: left;margin: 10px;font-weight: lighter">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{testText + testText.length}}
            </div>
          </el-card>
        </div>
        <!--下载链接-->
        <div class="float-div" style="margin: 5px 0 0px 20px;width: 100px;height: 120px;display:table;">
          <div style="display: table-cell;vertical-align: middle" @click="downloadResource">
            <svg-icon iconname="zhiran-iconwenjianjiawenjian" style="font-size: 50px;cursor: pointer"></svg-icon>
          </div>
        </div>
        <!--用户操作：转发，评论，点赞-->
        <div class="float-div-right" style="margin: 5px 110px 0 0px ;width:680px;height: 35px;display: table">
          <div class="float-div" style="margin-top: 5px;cursor: pointer">
            <svg-icon iconname="zhiran-iconzhuanfa11-copy" style="font-size: 22px;"></svg-icon>
          </div>
          <div class="float-div" style="position:relative;left: 43%;margin-top: 5px;cursor: pointer">
            <svg-icon iconname="zhiran-iconpinglun1-copy" style="font-size: 22px"></svg-icon>
          </div>
          <div class="float-div-right" style="margin-top: 5px;cursor: pointer">
            <svg-icon iconname="zhiran-iconicon1-copy" style="font-size: 22px"></svg-icon>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
//图片查看器
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import {AxiosNetwork} from "../../../plugins/axios";
import {cosDownloadFIle} from "../../../plugins/cosClient";
export default {
  name: "ResourceCard",
  data(){
    return{

      testText:'电话无非要求调控油价，问题是你登子拿什么要求我？就凭登子一路从阿富汗拉到乌克兰，狗大户都要为自己之前的点头哈腰扇自己一耳光。毕竟阿美垮的实在太惊人了。我怀疑乌克兰这波过去以后，不止狗大户拒接电话，印法德都会开始躁动。估计过不了两\n',
      //资源卡片
      resourceCard:{
        //帖主信息
        zrAuthor:{
          nickname:'',
          avatarUrl:'',
          level:1,
        },
        //点赞量
        likesNum:0,
        //下载量
        downloadNum:0,
        //分享数
        shareNum:0,
        //浏览量
        viewNum:0,
        //标题
        title:'',
        //预览描述
        previewDesc:''
      },
      //资源卡片集

    }
  },
  methods:{
    downloadResource(){
      cosDownloadFIle("resource/zr0000001/计科1903-8208190323-陈才.zip")
    },
  },
  components:{
    ElImageViewer
  },
  mounted() {

  }
}
</script>

<style>
  #resource-card{
    @import '~assets/css/base.css';
    width: 900px;
    margin-top: 25px
  }
  .card-div{
    height: 200px;
    text-align: center;

  }
  .el-card__body {
    padding: 0;
  }
  .div-res-attribute{
    width: 50px;
    height: 22px;
    margin-left: 1px
  }
  .div-res-attribute-text{
    font-size: 10px;
    color: #707070;
    margin: 6px 0 0 0px
  }
</style>